<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    es6语法讲解
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
   
</body>
</html>
<script>

    // 1. 新增了变量声明⽅式,也就是let和const
    // 2. 新增了解构赋值
    // 3. 新增了⼀个数组⽅法 字符串⽅法 正则表达的⽅法 函数的⼀些写法 对象的⽅法
    // 4. promise
    // 5. async await
    // 6. class 以及 继承
    // 7. 模块化
    // 8. 新的数据类型
    // 9. ⼤概能想到暂时只有这么多,在项⽬中我经常使⽤let和const 箭头函数。解构赋值 promise 还 有 async await


   // let const var 三者的区别；
  //  let const 有块级作用域 var 没有；

//   if(true) {
//     var a = 10;
//   }
//   console.log(a);
  
  // let const 有块级作用域，并且以 {} 为分割符。
//   if (true){
//     const b = 20;
//   }

//   console.log(b);

// 利用了 let 块级作用域
// for(let i = 0;i<10;i++){
//   setTimeout(()=>{
//     console.log(i);
//   })
// }


// var 有变量提升，let const 没有；
// console.log(a);
// var a = 20;

// console.log(b);
// let b = 30;


// let 是声明变量的，const 声明的是常量；
// const a = 20; // 常量一旦声明不允许改变
// a = 30;
// console.log(a);

// const obj = {name:'李四'}; // 注意：如果常量声明的是一个引用数据类型的话，是允许改变的；
// obj.name = '张三';
// console.log(obj);



// 暂时性死区

// var a = 10;
// if (true){
//   // 在块级作用域内部，会优先去找，使用的变量有没有声明，如果有的话，采用的是就近原则。
//   a = 20;
//   let a;
//   console.log(a);
// }



// 什么是解构赋值，解构赋值分为两种，一种是，数组的解构赋值，一种是对象的解构赋值

// 数组的解构赋值，只和位置有关系；
// let [b,a,...c] = [10,20,30,40,50]; 
// console.log(a,b,c); 
// let [b,a,c] = [10,20];
// console.log(a,b,c);


// 对象的解构赋值，只和属性名有关系
// let { sing:sig,name:user } = {name:'张三',sing:function(){console.log('我唱歌特别的好听');} };
// // 对象的解构赋值，还可指定变量名称。
// console.log(user);
// console.log(sig);
// sing();


// 3. 新增了⼀个数组⽅法 字符串⽅法 正则表达的⽅法 函数的⼀些写法 对象的⽅法

// 箭头函数和 普通函数，有什么区别；

// 1.箭头函数 没有 arguments 普通函数有 
// arguments 当函数的参数不确定传入多少的时候 
// function fn () {
//   console.log(arguments)
// }
// fn(1,2,3,4,5);
// fn(10,20,30);

// let fn = (...val) => { // 在es6 中 如果 箭头函数，要获取不确定参数的时候，一般使用 剩余参数
//     console.log(val)
// }
// fn(10,20,30);

// 2.箭头函数，不能使用new 关键字来实例化

// function fn (val) { // 此时的fn 函数 就叫做 构造函数 （构造函数的特点，首字母大写）
//   this.name = val;
// }

// let obj = new fn ('张三');
// console.log(obj);


// let fn = (val) => {
//   this.name = val;
// }
// let obj = new fn('李四');

// 3.箭头函数，不固话this指向；在箭头函数中 this 的指向只和声明箭头函数的 作用域的this 指向有关系


// let obj = { name: '王麻子',sing: function () {
//     console.log(this);
//     setTimeout(function(params) {
//         console.log(this);
//     })

// } }
// obj.sing();



// es6 新增的数组的方法 扩展运算符
// let arr = [1,2,3];
// let arr1 = [4,5,6];
// // concat 是拼接的意思
// // let arr2 = arr.concat(arr1);
// // console.log(arr2);
// let arr2 = [...arr,...arr1];
// console.log(...arr);
// console.log(arr2);


// Array.from()方法用于将两类对象转为真正的数组 类似数组的对象 可遍历（iterable）的对象

// 类似数组的对象 和数组相似的对象，并且有 length 属性
// let doms = document.querySelectorAll('li'); 
// // doms 不是真正的数组，就是一个类数组，
// // doms.some(item => item);
// console.log(doms);

// let arr = Array.from(doms);
// console.log(arr);
// // arr 是真正的数组
// arr.some(item => item);

// 下面这个是一个可遍历的对象。
//  let arrayLike = {
//     '0': 'a',
//     '1': 'b',
//     '2': 'c',
//     length: 3
// };
// let arr = Array.from(arrayLike);
// console.log(arr);
// arrayLike.some(item => item);


// Array.of()方法用于将一组值，转换为数组。
// let arr = Array.of(20,30,50);
// console.log(arr);

// includes 判断数组中是否包含某一项。

// let arr = [1,2,3,4,5,6];
// let bool = arr.includes(10);
// console.log(bool);


// 字符串的方法 模板字符串 也是 es6 新增的；
// let str =  
//    "<div>" 
//        + "<span>"+'模板字符串'+"</span>"
//    + "</div>";
// let str = `<div>
//        <span>${'我是模板字符串'}</span>
//    </div>`
// console.log(str);


// es6 新增的 repeat() 方法；重复字符串
// let str = 'xD';
// str = str.repeat(10);
// console.log(str);


// es6 新增了对象的方法 Object.assign() 用来合并，两个或者多个对象

// let obj = { name: "潘金莲" };
// let obj1 = { age: 18 };
// let obj3 = { ext: "貌美如花" };
// let obj2 = Object.assign(obj,obj1,obj3);
// console.log(obj2);
// let obj = { name: "潘金莲" };
// let obj1 = { age: 18 };
// let obj3 = { ext: "貌美如花" };
// // 扩展运算符的写法
// let obj2 = {...obj,...obj1,...obj3};
// console.log(obj2);



// 8. 新的数据类型 set map 新的数据解构 
// 特点：成员的值都是唯一的

// let s = new Set([1,1,2,2,3]);
// // s.some(item => item);
// // add 是 set的方法
// s.add(3);
// // s.clear(); // 清除的意思
// s.delete(3); // 删除对应的项
// console.log(s);


// 数组的去重 是 set 使用的最多的

// 利用set数据解构的特性，进行数组的去重。
// let arr = [1,1,2,2,3,4,5,6,6];
// // let arr1 = Array.from(new Set(arr));
// let arr1 = [...new Set(arr)];
// console.log(arr1);



// Map 数据解构；传统的对象的属性名 一般来说，只能是一个 字符串
// let arr = [1];
// let obj = { name: '张三' };
// console.log(obj);


const m = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);
const o = {p: 'Hello World'};

m.set(o, 'content');
m.forEach((item,index) => {
//   console.log(item);
  console.log(index);

})
// console.log(m);
// console.log(m.get('title'));
// m.get(o) // "content"

// m.has(o) // true
// m.delete(o) // true
// m.has(o) 

// map 数据解构，可以使用 对象，数组，字符串 当做键值
</script>